<template>
	<div id="app">
		<el-row style="margin-top: 150px;">
			<el-col :span="8" :offset="8">
				<el-tabs v-model="activeName" type="border-card">
					<el-tab-pane label="账号密码登录" name="first">
						<h1 style="text-align: center;">百货商城后台管理理系统</h1>
						<el-form label-position="right" :status-icon="true" :inline="false" :inline-message="false"
							ref="myform" :rules="rules" :model="form" label-width="120px">
							<!--rules中的name属性绑定。用name的规则校验数据-->
							<el-form-item label="用户名:" prop="name">
								<el-input v-model="form.name" clearable></el-input>
							</el-form-item>
							<el-form-item label="密码:" prop="password">
								<el-input v-model="form.password"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="onSubmit">登录</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="手机号登录" name="second">
						<h1 style="text-align: center;">百货商城后台管理理系统</h1>
						<el-form label-position="right" :status-icon="true" :inline="true" :inline-message="false"
							ref="myform2" :rules="rules2" :model="form2" label-width="120px">
							<!--rules中的name属性绑定。用name的规则校验数据-->
							<el-form-item label="手机号:" prop="tel">
								<el-input v-model="form2.tel" clearable></el-input>
							</el-form-item>
							<el-form-item label="验证码:" prop="code">
								<el-input style="width: 100px;" v-model="form2.code"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button ref="send" :disabled="disabled" type="primary" @click="getValidateCode">获取验证码
								</el-button>
							</el-form-item>
							<el-form-item label=" ">
								<el-button type="primary" @click="mobilelogin">登录</el-button>
							</el-form-item>
						</el-form>

					</el-tab-pane>
				</el-tabs>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	export default {
		name: 'App',
		methods: {
			mobilelogin: function() {
				let _this = this;
				console.log('点击了登录按钮')
				this.$refs.myform2.validate(function(valid, object) {
					console.log("点击了登录，要提交的表单数据为:", _this.form2)
					if (valid) {
						if (_this.form2.code == _this.Code) {
							_this.Code = '';
							let url = '/api/mall/UserServlet?method=mobileLogin';
							_this.$http.get(url, {
								params: {
									mobilePhone: _this.form2.tel
								}
							}).then(function(res) {
								if (res.data) {
									if (res.data.code == 0) {
										console.log(res.data);
										//console.log('点击了手机号 登录按钮 res.data.msg', res.data.msg)
										//console.log('点击了手机号 登录按钮 res.data.msg', res.data.data)

										console.log('11111111111111111111111')

										//res 和 response
										// console.log('token ', res.data.data
										// 	.token)
										// console.log('role_id ', res.data.data
										// 	.userInfo
										// 	.role.role_id)
										// console.log('username ', res.data.data
										// 	.userInfo
										// 	.username)

										window.sessionStorage.setItem("token", res.data.data
											.token);
										window.sessionStorage.setItem("username", res.data.data
											.userInfo
											.username);
										window.sessionStorage.setItem("role_id", res.data.data
											.userInfo
											.role.role_id);
										window.sessionStorage.setItem("touxiang", res.data.data
											.userInfo.file
										);

										//登录默认的激活路由设置为鱼护管理
										window.sessionStorage.setItem("activePath", "/main/welcome");
										//console.log('2222222222222222222222222')
										_this.$router.push({
											path: '/main'
										}) //路由跳转
									} else {
										_this.$message(res.data.msg);
									}
								} else {
									console.log('！！！res.data', res.data)
								}
							}).catch(function(error) {
								_this.$message(error);
							});
						} else {
							_this.$message("验证码输入有误");
						}
					}
				});

			},
			getValidateCode: async function() {
				console.log('this.$refs', this.$refs)
				console.log('点击了获得验证码按钮!!!!')
				let _this = this;
				if (_this.form2.tel == '') {
					this.$message("请输入手机号");
					return;
				}
				//这里默认一个用户只能绑定一个手机号
				//如果输入了手机号需要做后端验证，看后端数据库表中是否存在该手机号，
				//否则验证码也是不能发送的
				let mark = false;
				let urlQueryTel = '/api/mall/UserServlet?method=existTel';
				await this.$http.get(urlQueryTel, {
					params: {
						mobilePhone: this.form2.tel
					}
				}).then(function(res) {
					if (res.data.code == 0) {
						console.log(res.data.msg);
						mark = true;
					} else {
						_this.$message(res.data.msg);
					}
				}).catch(function(error) {
					// _this.$message(error);
					_this.$message.error({
						message: error || '系统错误，请稍后再试!'
					});
				});
				if (!mark) {
					console.log('应该不往下执行！！！！')
					return;
				}
				console.log('已经确定该手机号数据库中存在')
				//----------------一级确定有该手机号的时候才根据该手机来发验证码-------------------
				this.Code = '';
				let url = '/api/mall/GetValidateCodeServlet?method=getcode';
				await this.$http.get(url, {
					params: {
						mobilePhone: this.form2.tel
					}
				}).then(function(res) {
					if (res.data.code == 0) {
						_this.Code = res.data.data;
					} else {
						_this.$message(res.data.msg);
					}
				}).catch(function(error) {
					// _this.$message(error);
					_this.$message.error({
						message: error || '系统错误，请稍后再试!'
					});
				});
				let second = _this.num;
				let hanller = window.setInterval(function() {
					if (second == 0) {
						_this.$nextTick(() => {
							_this.$refs.send.$el.innerText = "获取验证码"
						})
						clearInterval(hanller);
						_this.disabled = false;
					} else {
						_this.disabled = true;
						_this.$nextTick(() => {
							_this.$refs.send.$el.innerText = second + _this.text
						})
					}
					second--;
				}, 1000);
			},
			onSubmit: function() {
				let _this = this;
				console.log('点击了登录按钮')
				//找到ref=myform的Vue组件  ..validate调用子组件的验证方法
				//调用子组件的验证方法，获得表单校验结果，结果为真就可以提交表单，否则不能提交表单
				this.$refs.myform.validate(function(valid, object) {
					if (valid) {
						console.log("点击了登录，要提交的表单数据为:", _this.form)
						//做一个简单判断，当用户名为admin,密码为123456时，表示用户名密码正确，跳转到/main页面中

						let url = "/api/mall/UserServlet?method=login"
						_this.$http.get(url, {
							params: _this.form
						}).then(function(response) {

							//console.log("服务端返回的数据为:", response);

							if (response.data.code == 0) {
								//取出jwt串和登录的用户信息，用会话存储存储在本地
								// console.log(response.data.data);
								// console.log(response.data.data.token)
								// console.log(response.data.data.userInfo.username)
								// console.log(response.data.data.userInfo.role.role_id)

								window.sessionStorage.setItem("token", response.data.data
									.token);
								window.sessionStorage.setItem("username", response.data
									.data.userInfo
									.username);
								window.sessionStorage.setItem("role_id", response.data.data
									.userInfo
									.role.role_id);
								window.sessionStorage.setItem("touxiang", response.data.data
									.userInfo.file
								);
								// window.sessionStorage.setItem("img",response.data.data.userInfo.file);
								//登录默认的激活路由设置为鱼护管理
								window.sessionStorage.setItem("activePath",
									"/main/welcome");

								_this.$router.push({
									path: '/main'
								}) //路由跳转

							} else {
								_this.$message(response.data.msg);
							}
						}).catch(function(error) {
							console.log(error);

							_this.$message(error);
						})

					} else {
						console.log('error submit!!');
						console.log(object); //校验未通过的字段。。
						return false;
					}
				});


			}
		},
		data() {
			return {
				num: 60,
				text: 's 后再次发送',
				disabled: false,
				Code: '',
				//serverValidateCode: '',
				activeName: "first",
				rules2: {
					tel: [{
						required: true,
						message: '手机号不能为空',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}]
				},
				rules: { //定义校验的规则
					name: [{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}, ]
				},
				form: {
					name: 'admin',
					password: '123456',
				},
				form2: {
					code: '',
					tel: "15873988246"
				}
			}
		}
	}
</script>

<style>
	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
</style>
